<template>
  <div class="article">
    <div class="left">
      <slot name="left">
        <ZgImgViewer :mask="false" :tag="info.tag"/>
      </slot>
    </div>
    <div class="right">
      <div class="title cpt">
        <slot name="title">{{ info.title }}</slot>
      </div>
      <div class="words">
        <slot name="intro">{{ info.summary }}</slot>
      </div>
      <div class="read" v-if="info.readTimes">
        <slot name="btn">{{ info.readTimes }} 浏览</slot>
      </div>
      <div class="user">
        <slot name="user"><ZgSender :user="info.user" :time="info.updateTime"></ZgSender></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          tag: '实时新闻',
          title: '这里是文章标题',
          summary: '这里是文章简述这里是文章简述这里是文章简述这里是文章简述这里是文章简述,这里是文章简述这里是文章简述这里是文章简述这里是文章简述这里是文章简述,这里是文章简述这里是文章简述这里是文章简述这里是文章简述这里是文章简述',
          readTimes: 125,
          user: { name: '发布人', head: '/upload/head.png' },
          updateTime: '1624526939088'
        }
      }
    },
    kinds: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      path: '',
      user: {}
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.article {
  margin-bottom: 15px;
  background: #fff;
  padding: 15px;
  padding-left: 230px;
  position: relative;
  .left {
    width: 200px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: 15px;
    left: 15px;
  }
  .title {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
    margin-bottom: 10px;
    &:hover {
      color: #0b4f8f;
    }
  }
  .words {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    margin-bottom: 60px;
  }
  .read {
    position: absolute;
    bottom: 20px;
    right: 15px;
    font-size: 12px;
  }
  .user {
    position: absolute;
    bottom: 20px;
    left: 230px;
    font-size: 12px;
  }
}
</style>
